<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品展示</title>
		<style>

			*{
			 margin: 0;
			 padding: 0;
			}
			
			
			
			 .ah{ 
				 position: relative;
			     width: 200px;
				 height:50px;
				 top: 7px;
				 background-image: url(产品-Bellucci%20EVOO_files/logo_k.png);
				 }
		
				
				
			li{
				list-style-type:none;
				float: left;
				width: 100px;
				margin-left: 30px;
			}

			ul{
					position: relative;
					top: -25px;
					left: 73%;
					width: 300PX;
					overflow: auto;
			} 
			a{
				text-decoration: none;	
				font-size: small;
				font-family: "微软雅黑";
				color: #444444;
				
			 }
			 a:hover{
				     background-color: #AFD9EE;
					 color: #89bf55;
			        }
			 
			 .b{
				 width:100%;
				 height:77px;
				 background-color: #f9f9f9;
			 }
			 
			 .b2{
				position: relative;
				left: 8%;
				 width: 1200px;
			 }
			 .b3{
				position: relative;
				 left:9%;
				 width: 1200px;
			 }
		    .b4{
				position: relative;
				left:3.5%;
				width: 150px;
			}
			.b5{
				position: relative;
				left:14%;width: 150px;
			}
			.b6{
				position: relative;
				left:32%;width: 150px;
			}
			.c1{
				position: relative;
				left:7%;
			}
			.c2{
				position: relative;
				left:19%;
			}
			.c3{
				position: relative;
				left:29%;
			}
			.c4{
				position: relative;
				left:6%;
			}
			.c5{
				position: relative;
				left:20%;
			}
			
			.c6{
				position: relative;
				left:35%;
			}
			 p{
				width: 1px;height: 1px;
				background-color: #000000;
				display: none;
				
				}
		  
		  img{
			 transition: all .3s; 
			 margin-top: 8px;
		  }
		  img:hover{
			  transform: scale(1.04);
		  }
		  
		  
		  
			</style>
	</head>
	<body>
		<div>
			<div class="b">
					<div class="ah">
					</div>
					<div>
						<ul>
							<li style="width: 52px;"><a href="#">产品展示</a>
								<p></p>
							</li>
							<li style="width: 52px;"><a href="#">关于我们</a>
								<p></p>
							</li>
							<li style="width:66px;"><a href="#">商店定位器</a>
								<p></p>
							</li>
						</ul>
					</div>
			</div>
			<div class="b2">
				<img src="产品-Bellucci%20EVOO_files/toscano-pgi-500_7.jpg">
				<img src="产品-Bellucci%20EVOO_files/organic-750_3.jpg">
				<img src="产品-Bellucci%20EVOO_files/3-bottle-pack.jpg">

				<div>
					<span>
						<a href="#" class="b4">传奇系列-Toscano PGI有机EVOO 500毫升</a>
					</span>
					<span>
						<a href="#" class="b5">有机100％意大利EVOO 750毫升</a>
					</span>
					<span>
						<a href="#" class="b6">3瓶礼盒装</a>
					</span>
				</div>
			</div>
			<div class="b3">
				<img src="产品-Bellucci%20EVOO_files/unknown-1.jpeg">
				<img src="产品-Bellucci%20EVOO_files/unknown.jpeg">
				<img src="产品-Bellucci%20EVOO_files/sicily-organic-pgi-500.jpg">
				<div>
					<a href="#" class="c1">100％意大利On-the-Go EVOO</a>
					<a href="#" class="c2">有机100％意大利On-the-Go EVOO</a>
					<a href="#" class="c3">传奇系列-西西里PGI有机EVOO 500毫升</a>
				</div>
			</div>
			<div class="b3">
				<img src="产品-Bellucci%20EVOO_files/organic-500_2.jpg">
				<img src="产品-Bellucci%20EVOO_files/100-italian-750_2.jpg">
				<img src="产品-Bellucci%20EVOO_files/100-italian-500_2.jpg">
				<div>
					<a href="#" class="c4">有机100％意大利EVOO 500毫升</a>
					<p></p>
					<a href="#" class="c5">100％意大利EVOO 750毫升</a>
					<p></p>
					<a href="#" class="c6">100％意大利EVOO 500毫升</a>
					<p></p>
				</div>
			</div>
		</div>
		<script src="new_file.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			$("li").hover(function() {
				$(this).children("p").show()
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": aa
				}, 350)
				console.log($(this).children("p"))
			}, function() {
				var aa = $(this).width()
				$(this).children("p").stop(true).animate({
					"width": 0
				}, 350)
			})
		</script>
		<br><br><br><br>
		<hr>
	</body>
</html>
